<template>
    <div class="app-container">
      <el-container>
        <el-header class="header-container">
          <Header />
        </el-header>
        <el-container>
          <el-aside :width="isCollapse ? '64px' : '200px'" class="aside-container">
            <Sidebar :isCollapse="isCollapse" @toggle-collapse="isCollapse = !isCollapse" />
          </el-aside>
          <el-main class="main-container">
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script>
  import Header from "@/components/HeaderView.vue";
  import Sidebar from "@/components/SidebarView.vue";
  
  export default {
    name: "LayoutView",
    components: {
      Header,
      Sidebar,
    },
    data() {
      return {
        isCollapse: false,
      };
    },
  };
  </script>
  
  <style lang="less" scoped>
  .app-container {
    height: 100vh;
    background-color: #f5f7fa;
  
    .header-container {
      background-color: #2c3e50;
      color: white;
      padding: 0;
      height: 60px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
      z-index: 10;
    }
  
    .aside-container {
      background-color: #34495e;
      transition: width 0.3s;
      height: calc(100vh - 60px);
      overflow: hidden;
    }
  
    .main-container {
      padding: 20px;
      background-color: #f5f7fa;
      height: calc(100vh - 60px);
      overflow-y: auto;
    }
  }
  </style>